<template>
	<qh-tabbar-page-view type="2" current="1" title="分类">
		<view class="classify-box tabbar-page-bottom">
			<view class="classify">
				<view class="classify-search-box">
					<view class="classify-search" @tap="search">
						<text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
						<text>搜索商品</text>
					</view>
				</view>
				<view class="classify-content">
					<!-- 左侧栏 -->
					<view class="classify-left">
						<!-- 一级分类 -->
						<block v-for="(item, index1) in classList" :key="index1">
							<view @tap="classTap1(index1)" :class="'classify-left-inner-1' + (index_1==index1?' classify-left-check-1':'')">
								<view>{{item.class_name}}</view>
							</view>
							<!-- 二级分类 -->
							<block v-if="item.subset" v-for="(item2, index2) in item.subset" :key="index2">
								<view @tap="classTap2(index2)"
									:class="'classify-left-inner-2' + (index1==index_1?' classify-left-inner-show-2':'') + '' + (index_2==index2?' classify-left-check-2':'')">
									<view>{{item2.class_name}}</view>
								</view>
							</block>
						</block>
					</view>
					<!-- 右侧 -->
					<view class="classify-right flex-column">
						<!-- 三级分类横向 -->
						<view class="classify-right-title">
							<view id="class3Box" class="classify-right-title-box">
								<block v-if="index_2 >= 0 && classList[index_1].subset[index_2].subset">
									<view v-for="(item, index3) in classList[index_1].subset[index_2].subset" :key="index3" @tap="classTap3(index3)"
										:data-index="index3" :class="'classify-right-title-list' + (index_3==index3?' classify-right-check-3':'')">
										{{item.class_name}}
									</view>
								</block>
								<block v-else>
									<view class="classify-right-title-list classify-right-check-3">{{selectTitle}}</view>
								</block>
							</view>
							<text @tap="showClass3Tap" v-if="showClass3Btn&&index_2>=0&&classList[index_1].subset[index_2].subset"
								class="qh-rt-single qh-rt-a-zu4421 classify-right-title-icon flex-cn-cn"></text>
						</view>
						<!-- 三级分类遮罩层 -->
						<view v-if="showClass3" class="classify-right-class-box">
							<view class="classify-right-class-model" @tap="showClass3Tap"></view>
							<view class="classify-right-class-model-title">
								<text>全部分类</text>
								<text @tap="showClass3Tap" class="qh-rt-single qh-rt-a-zu4421 classify-right-class-model-close-icon flex-cn-cn"></text>
							</view>
							<view class="classify-right-class-model-content">
								<view v-for="(item, index3) in classList[index_1].subset[index_2].subset" :key="index3" @tap="classTap3(index3)"
									:class="'classify-right-class-model-list' + (index_3==index3?' classify-right-class-model-list-act':'')">
									{{item.class_name}}
								</view>
							</view>
						</view>
						<!-- 商品列表 -->
						<view class="flex-column-100 classify-goods-list-box">
							<qh-scroll-view parent-el-name=".classify-goods-list-box" @init="initScroll" :scroll-y="scroll" refresher-enabled
								:scroll-top="scrollTop" @scrolltolower="getGoods" @refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh"
								:lowerTriggered="isLoading" :loaded="!canLoad && !isLoading && goodsList.length >= 5"
								:empty="!goodsList.length && !isLoading && !canLoad">
								<view v-for="(item, index) in goodsList" :key="index" class="classify-goods-list" @tap="viewGoods" :data-goods-id="item.id">
									<view class="classify-goods-list-img">
										<view v-if="item.goods_num<=0" class="goods-sell-empty">已售空</view>
										<image :src="item.goods_image" mode="aspectFit"></image>
									</view>
									<view class="classify-goods-list-name">{{item.goods_name}}</view>
									<block v-if="item.promotion_status==1">
										<view class="classify-goods-list-price">￥{{item.act_price}}</view>
									</block>
									<block v-else>
										<!-- -->
										<view class="classify-goods-list-price flex-cn" v-if="showPlusPrice(item)">
											<text class="plus-price-color">￥{{item.plus_price}}</text>
											<text class="plus-price-icon">PLUS</text>
										</view>
										<view class="classify-goods-list-price flex-cn" v-if="showVipPrice(item)">
											<text class="price-color">￥{{item.shop_mem_price}}</text>
											<text class="vip-price-icon">VIP</text>
										</view>
										<view class="classify-goods-list-price" v-if="showOnlinePrice(item)">￥{{item.online_price}}</view>
									</block>
									<view class="commission" v-if="item.disStoreProp">预估收益 <text style="color:#ff3d3d;">￥{{item.disStoreProp}}</text></view>

									<text class="qh-rt-single qh-rt-a-zu4415 classify-goods-list-btn" @tap.stop="addToCar(index)"></text>
								</view>
							</qh-scroll-view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 规格 -->
		<block v-if="showSelectSku">
			<choose-sku :sku="sku" :goodsinfo="goods" @close="closeSku"></choose-sku>
		</block>
	</qh-tabbar-page-view>
</template>

<script>
	var app = getApp().globalData;
	import qhScrollMixin from "@/components/qh-scroll-view/mixins.js";
	export default {
		mixins: [qhScrollMixin], // 使用mixin
		data() {
			return {
				store_id: 0,
				isLoading: false,
				isRefresh: false,
				scroll: true,
				page: 1,
				canLoad: true,
				index_1: 0,
				index_2: -1,
				index_3: -1,
				user_type: 1,
				classList: [],
				class3Width: 0,
				showClass3: false,
				showClass3Btn: false,
				rightWidth: 321,
				showSelectSku: false, //是否显示选择规格弹框
				sku: {},
				goods: {},
				goodsList: [],
				selectTitle: "",
				scrollTop: 0,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			await this.$onLaunched;
			// #ifdef MP-ALIPAY
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			if (options && (options.store_id || options.storeid)) {
				this.$store.store_id = options.store_id ? options.store_id : options.storeid;
			}

			var query = uni.createSelectorQuery();
			// 获取右侧商品分类宽度
			query.select('.classify-right').boundingClientRect((rect) => {
				this.setData({
					rightWidth: rect.width
				});
			}).exec();
			if (!this.$store.store_id) {
				await this.getStore(); //获取门店
			}
			if (this.$store.store_id) {
				this.getData();
			}
		},
		onShareAppMessage(res) {
			return {
				title: '商品分类',
				path: '/pages/newClassify/newClassify?store_id=' + this.$store.store_id + '&share_uid=' + app.XcxData.userInfo.uid,
			};
		},
		methods: {
			async getStore() {
				return new Promise(async (resolve, reject) => {
					getApp().globalData.getStoreList().then((res) => {
						if (res.store && res.store.length) {
							uni.setStorageSync('storeInfo', res.store[0])
							this.$store.store_id = res.store[0].store_id;
							this.store_id = res.store[0].store_id;
							resolve(true);
						} else {
							reject(false);
						}
					}).catch(() => {
						reject(false);
					})
				});
			},
			// 关闭规格选择--存在数据则为选择完成
			closeSku(data) {
				this.showSelectSku = false;
			},
			goTop() {
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			async pullDownRefresh() {
				this.isRefresh = true;
				await this.refreshGoods();
				this.isRefresh = false;
				uni.showToast({
					title: '刷新成功'
				});
			},
			async addToCar(index) {
				if (this.goodsList[index].attribute_state == 2) {
					this.sku.shoppingNum = 1;
					this.goods = {
						...this.goodsList[index],
						goods_id: this.goodsList[index].id
					};
					this.showSelectSku = true;
				} else {
					const res = await this.$mutations.setShoppingCar({
						goods_id: this.goodsList[index].id,
						num: 1,
						goods_type: 2,
					})
				}
			},

			search() {
				uni.navigateTo({
					url: '../product/productList/productList?type=1'
				});
			},

			// 点击分类1
			classTap1(index) {
				if (this.index_1 == index) return;
				this.goTop();
				this.index_1 = index;
				this.index_3 = -1;

				let data = this.classList;
				let index2 = data[index].subset ? 0 : -1;
				this.index_2 = index2;
				if (index2 >= 0) {
					let index3 = data[index].subset && data[index].subset[0].subset ? 0 : -1;
					this.index_3 = index3;
					if (index3 >= 0) {
						this.selectTitle = data[index].subset[0].subset[0].class_name;
					} else {
						this.selectTitle = data[index].subset[0].class_name;
					}
				} else {
					this.selectTitle = data[index].class_name;
				}

				this.refreshGoods();
				this.calculationClass3Box();
			},

			// 计算是否显示三级分类下拉框
			calculationClass3Box() {
				var query = uni.createSelectorQuery(); //选择id
				setTimeout(() => {
					query.selectAll('.classify-right-title-list').boundingClientRect((rect) => {
						var showClass3Btn = false;
						var _witdh = 0;
						for (var i = 0; i < rect.length; i++) {
							_witdh += rect[i].width; // 获取所有子元素的宽度如果大于最小宽度则显示下拉选项
						}

						if (_witdh > this.rightWidth - 40) {
							showClass3Btn = true;
						}

						this.setData({
							showClass3Btn: showClass3Btn
						});
					}).exec();
				}, 1000)

			},
			showClass3Tap() {
				this.setData({
					showClass3: !this.showClass3
				});
			},
			classTap2(index) {
				if (this.index_2 == index) return;

				this.index_2 = index;

				let data = this.classList;
				let index3 = data[this.index_1].subset[this.index_2].subset ? 0 : -1;
				this.index_3 = index3;
				if (index3 >= 0) {
					this.selectTitle = data[this.index_1].subset[this.index_2].subset[this.index_3].class_name;
				} else {
					this.selectTitle = data[this.index_1].subset[this.index_2].class_name;
				}

				this.goTop()
				this.refreshGoods();
				this.calculationClass3Box();
			},
			classTap3(index) {
				if (this.index_3 == index) return;
				this.index_3 = index;

				let data = this.classList;
				this.selectTitle = data[this.index_1].subset[this.index_2].subset[this.index_3].class_name;

				this.goTop()
				this.refreshGoods();
				this.calculationClass3Box();
				this.showClass3 = false;
			},

			// 跳转商品详情页
			viewGoods(e) {
				var goods_id = e.currentTarget.dataset.goodsId;
				uni.navigateTo({
					url: '/pages/product/details/details?id=' + goods_id
				});
			},

			async getData() {
				this.showSelectSku = false;
				await this.getClass();
				this.calculationClass3Box();

				await this.refreshGoods();
			},
			//刷新商品
			async refreshGoods() {
				this.page = 1;
				this.canLoad = true;
				this.isLoading = false;
				this.goodsList = [];
				await this.getGoods();
			},
			//初始化分类
			getClass() {
				return new Promise(async resolve => {
					const {
						status,
						data
					} = await this.$request('SmallProgramApi/Goods/getGoodsClass_v3');
					if (status != 1) return resolve(false);
					this.classList = data;
					let index1 = data.length > 0 ? 0 : -1;
					this.index_1 = index1;
					this.index_2 = -1;
					this.index_3 = -1;
					if (index1 >= 0) {
						let index2 = data[0].subset ? 0 : -1;
						this.index_2 = index2;
						if (index2 >= 0) {
							let index3 = data[0].subset && data[0].subset[0].subset ? 0 : -1;
							this.index_3 = index3;
							if (index3 >= 0) {
								this.selectTitle = data[0].subset[0].subset[0].class_name;
							} else {
								this.selectTitle = data[0].subset[0].class_name;
							}
						} else {
							this.selectTitle = data[0].class_name;
						}
					} else {
						this.selectTitle = '';
					}
					this.$nextTick(() => {
						resolve(true)
					})
				})
			},
			//获取商品
			async getGoods() {
				if (this.isLoading || !this.canLoad) return;
				this.isLoading = true;

				let id, class_type;

				if (this.index_3 >= 0) {
					class_type = 3;
					id = this.classList[this.index_1].subset[this.index_2].subset[this.index_3].id;
				} else if (this.index_2 >= 0) {
					class_type = 2;
					id = this.classList[this.index_1].subset[this.index_2].id;
				} else {
					class_type = 1;
					id = this.classList[this.index_1].id;
				}

				const res = await this.$request('SmallProgramApi/Goods/getGoodsList_v2', {
					id: id,
					type: class_type,
					page: this.page,
				}, false)
				if (res.status == 1) {
					if (this.page == 1) {
						this.goodsList = res.data;
					} else {
						this.goodsList.push.apply(this.goodsList, res.data);
					}
					this.page++;
					this.sku.user_type = res.user_type;
					this.user_type = res.user_type;
					this.isLoading = false;
					this.canLoad = res.count == res.data.length ? true : false
				} else {
					this.goodsList = [];
					this.canLoad = false;
					this.isLoading = false;
				}
			},

			// 展示plus会员价条件
			showPlusPrice(item) {
				return app.showPlusPrice(item)
			},

			// 展示会员价条件
			showVipPrice(item) {
				return app.showVipPrice(item)
			},

			// 展示普通价格
			showOnlinePrice(item) {
				return app.showOnlinePrice(item)
			}

		}
	};
</script>
<style>
	@import "./newClassify.css";


	.plus_price_icon {
		width: 70rpx;
		height: 30rpx;
	}
</style>
